<template>
	<div class="app-container">
		<SearchForm v-show="showSearch" v-model="queryParams" :options="options.formOps" @onQuery="getList">
			<template #default="{ handleQuery, filterForm }">
				<el-form-item label="措施分类1" label-position="right">
					<el-select @change="changecs1(handleQuery, $event)" style="width: 100%"
						v-model="filterForm.measuresOne">
						<el-option value="工程技术"></el-option>
						<el-option value="维护保养"></el-option>
						<el-option value="操作行为"></el-option>
						<el-option value="应急措施"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="措施分类2" label-position="right">
					<el-select style="width: 100%" v-model="filterForm.measuresTwo" :disabled="!filterForm.measuresOne"
						@change="handleQuery">
						<el-option v-for="cs in cs2" :value="cs" :label="cs"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="措施分类3" prop="userId" label-position="right">
					<el-input v-model="filterForm.measuresThree" @change="handleQuery">
					</el-input>
				</el-form-item>
			</template>
		</SearchForm>
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
				<!-- v-hasPermi="['preventionSecurityRisk:create']" -->
			</el-col>
			<el-col :span="1.5">
				<ImportExcel type="primary" :url="APIS.url" plain icon="Plus" @success="getList"></ImportExcel>
				<!-- v-hasPermi="['preventionSecurityRisk:importData']" -->
			</el-col>
			<el-col :span="1.5">
				<ExportExcel type="primary" :url="APIS.url" plain></ExportExcel>
				<!-- v-hasPermi="['preventionSecurityRisk:importTemplate']" -->
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
				<!-- v-hasPermi="['preventionSecurityRisk:export']" -->
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" plain :disabled="selectList.length === 0"
					@click="handleDelList">批量删除</el-button>
				<!-- v-hasPermi="['preventionSecurityRisk:delete']" -->
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>
		<Table ref="table" :auto-featch="false" :fetch-data="fetchData" :options="options.table"
			@selectionChange="selectionChange">
			<template #default>
				<el-table-column label="措施分类1" align="center" key="measuresOne" prop="measuresOne" />
				<el-table-column label="措施子类" align="center" key="measuresTwo" prop="measuresTwo" />
				<el-table-column label="负责人部门" align="center" key="deptName" prop="deptName" />
				<el-table-column label="负责人名称" align="center" key="userName" prop="userName" />
			</template>

			<template #actionButton="{ row }">
				<el-button type="text" icon="Edit" @click="handleEdit(row)">修改</el-button>
				<!-- v-hasPermi="['preventionSecurityRisk:update']" -->

				<el-button type="text" style="color: red" icon="Edit" @click="handleDel(row)">删除</el-button>
				<!-- v-hasPermi="['preventionSecurityRisk:delete']" -->
			</template>
		</Table>
		<DialogVform :formJson="formJson" ref="dialogVform" @onSubmit="onSubmit" :slots="[
        'deptSlot',
        'userSlot',
        'cuoshi1',
        'cuoshi2',
        'cuoshi3',
        'cuoshi4',
        'cuoshi5',
        'cuoshi6',
		    'cuoshi7',
        'unit'
      ]" :title="dialogType === 'add' ? '新增风险分析清单' : '修改风险分析清单'">
			<template #deptSlot>
				<el-form-item label="责任部门" prop="deptId" label-position="right">
					<TreeSelect v-model="form.deptId" :options="deptTree" @change="changeDept" style="width: 100%">
					</TreeSelect>
				</el-form-item>
			</template>
			<template #userSlot>
				<el-form-item label="责任人" prop="userId" label-position="right">
					<el-select @change="userIdChange" style="width: 100%" v-model="form.userId">
						<el-option v-for="user in userList" :value="user.userId" :label="user.nickName"></el-option>
					</el-select>
				</el-form-item>
			</template>
			<template #cuoshi1>
				<el-form-item label="措施分类1" label-position="right">
					<el-select @change="changeMeasuresOne" style="width: 100%" v-model="form.measuresOne">
						<el-option value="工程技术"></el-option>
						<el-option value="维护保养"></el-option>
						<el-option value="操作行为"></el-option>
						<el-option value="应急措施"></el-option>
					</el-select>
				</el-form-item>
			</template>
			<template #cuoshi2>
				<el-form-item label="措施分类2" label-position="right">
					<el-select style="width: 100%" v-model="form.measuresTwo" :disabled="!form.measuresOne">
						<el-option v-for="cs in cs2" :value="cs" :label="cs"></el-option>
					</el-select>
				</el-form-item>
			</template>
			<template #cuoshi3>
				<el-form-item label="措施分类3" prop="userId" label-position="right" label-width="112px">
					<el-input v-model="form.measuresThree"> </el-input>
				</el-form-item>
			</template>
			<template #cuoshi4>
				<el-form-item label="包保责任人任务" label-position="right">
					<el-select style="width: 100%" v-model="form.dutyTask">
						<el-option value="0" label="否"></el-option>
						<el-option value="1" label="是"></el-option>
					</el-select>
				</el-form-item>
			</template>
			<template #cuoshi5>
				<el-form-item label="包保责任人类型" label-position="right" v-if="cuoshi5Flag">
					<el-select style="width: 100%" v-model="form.taskDuty" @change="handleTaskDuty">
						<el-option value="1" label="主要负责人"></el-option>
						<el-option value="2" label="技术负责人"></el-option>
						<el-option value="3" label="操作负责人"></el-option>
					</el-select>
				</el-form-item>
			</template>
			<template #cuoshi6>
				<el-form-item label="对应项内容" label-position="right" v-if="cuoshi5Flag">
					<el-select style="width: 100%" v-model="form.taskNumId" :disabled="!form.taskDuty">
						<el-option v-for="it in taskContentData" :value="it.id" :label="it.taskContent"></el-option>
					</el-select> </el-form-item></template>

			<template #cuoshi7>
				<el-form-item label="管控方式" label-position="left" :style="{'margin-top': cuoshi5Flag ? '' : '-44px'}" label-width="112px">
					<el-select style="width: 100%" v-model="form.controlType">
						<el-option :value="1" label="自动化监控"></el-option>
						<el-option :value="2" label="隐患排查"></el-option>
						<el-option :value="3" label="其他"></el-option>
					</el-select>
				</el-form-item>
			</template>

			<template #unit>
				<el-row >
					<el-col :span="12">
						<el-form-item label="周期单位" label-position="left" label-width="112px">
							<el-select style="width: 100%;" v-model="form.unit">
								<el-option value="年" label="年"></el-option>
								<el-option value="月" label="月"></el-option>
								<el-option value="日" label="日"></el-option>
								<el-option value="小时" label="小时"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
					</el-col>
				</el-row>

				<el-row v-if="form.unit == '小时'">
					<el-col :span="12">
						<el-form-item label="开始时间" label-position="left" label-width="112px">
							<el-time-picker style="width: 100%;" v-model="form.workStartTime" arrow-control format="HH:mm" value-format="HH:mm"
								placeholder="请选择开始时间" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="结束时间" label-position="right" label-width="140px">
							<el-time-picker style="width: 100%;" v-model="form.workEndTime" arrow-control format="HH:mm" value-format="HH:mm"
								placeholder="请选择结束时间" />
						</el-form-item>
					</el-col>
				</el-row>
			</template>
		</DialogVform>
	</div>
</template>

<script setup>
	import {
		watch
	} from "vue";
	import {
		listUser,
		deptTreeSelect
	} from "@/api/system/user";
	import Table from "@/components/Table/index.vue";
	import DialogVform from "@/components/dialogVform/index";
	import SearchForm from "@/components/searchForm/index";
	import {
		apis as APIS
	} from "@/api/fxfjgk/fxfxqd.js";
	import formJson from "./inner.json";
	import {
		useAsyncData,
		useFormJson
	} from "@/views/hooks/useAsyncData.js";
	import TreeSelect from "@/components/TreeSelect/index";
	import {
		selectOptions
	} from "./consts";
	import ImportExcel from "@/components/ImportExcel/index.vue";
	import ExportExcel from "@/components/ExportExcel/index.vue";
	const props = defineProps({
		parentNode: {
			type: Object,
			default: () => ({}),
		},
	});
	const plugAdd = () => {
		form.value.deviceId = props.parentNode.id;
	};
	const cuoshi5Flag = ref(false);
	const {
		proxy
	} = getCurrentInstance();
	const userList = ref([]);
	const cs2 = ref([]);
	const deptTree = ref([]);
	const ops = useFormJson(formJson, {
		sort: [],
		sortable: [],
	});
	const changeMeasuresOne = (val) => {
		cs2.value = selectOptions[val] || [];
	};
	const options = reactive({
		table: ops,
		formOps: ops.filter((i) => [
			"measuresProject",
			"dangerEvent",
			"analysisUnit",
			"cuoshi1",
			"cuoshi2",
			"cuoshi3",
			"deptUserName",
		].includes(i.prop)),
	});

	const showSearch = ref(true);
	const dialogVform = ref();
	const taskContentData = ref([]);
	const plugEdit = (row) => {
		form.value.deptId = row.deptId;
		form.value.deptName = row.deptName;
		form.value.userName = row.userName;
		form.value.userId = row.userId;
		form.value.measuresOne = row.measuresOne;
		form.value.measuresTwo = row.measuresTwo;
		form.value.measuresThree = row.measuresThree;
		form.value.dutyTask = row.dutyTask;
		form.value.taskDuty = row.taskDuty;
		form.value.taskContent = row.taskContent;
		form.value.taskNumId = row.taskNumId;
		form.value.workStartTime = row.workStartTime;
		form.value.workEndTime = row.workEndTime;
		form.value.unit = row.unit;
		form.value.controlType = row.controlType!=null && row.controlType==0 ? "" : row.controlType;
		changeDept(form.value.deptId, form.value.deptName);
		changeMeasuresOne(form.value.measuresOne);
	};
	const plugSubmit = (data) => {
	  // console.log("plugSubmit(data) : " + JSON.stringify(data))
	  // console.log("form.value : " + JSON.stringify(form.value))
	  return {
	    ...data,
	    ...form.value,
	  };
	};
	const table = ref();
	const filterForm = ref({});
	const {
		onSubmit,
		fetchData,
		handleEdit,
		handleAdd,
		handleDel,
		getList,
		form,
		queryParams,
		dialogType,
		handleExport,
	} = useAsyncData({
		APIS,
		formJson,
		dialogVform,
		table,
		proxy,
		plugEdit,
		plugAdd,
		filterForm: filterForm.value,
		plugSubmit,
	});
	watch(
		() => form.value.taskDuty,
		() => {
			taskData();
		}
	);
	watch(
		() => form.value.dutyTask,
		(val) => {
			if (val === "0") {
				cuoshi5Flag.value = false;
			} else {
				cuoshi5Flag.value = true;
			}
		}
	);
	const taskData = () => {
		APIS.taskList({
			dutyType: form.value.taskDuty
		}).then((res) => {
			taskContentData.value = res.rows;
		});
	};
	const handleTaskDuty = () => {
		form.value.taskNumId = "";
		taskData();
	};
	onMounted(() => {
		deptTreeSelect().then((res) => {
			deptTree.value = res.data;
		});
	});
	const changeDept = (val, label) => {
		form.value.deptName = label;
		form.value.deptId = val;
		if (val) {
			listUser({
				pageNum: 1,
				pageSize: 5000000,
				deptId: val,
			}).then((res) => {
				userList.value = res.rows;
			});
		}
	};
	const userIdChange = (val) => {
		if (val) {
			const user = userList.value.find((user) => user.userId === val);
			form.value.userName = user.nickName;
			// form.value.userId = user.val;
		} else {
			form.value.userName = "";
		}
	};
	watch(
		() => props.parentNode,
		(val) => {
			filterForm.value.deviceId = val.id || null;
			getList();
		}, {
			deep: true,
		}
	);
	const changeParent = (p) => {
		filterForm.value.deviceId = p.id || null;
		getList();
	};
	defineExpose({
		changeParent,
	});
	const changecs1 = (query, value) => {
		cs2.value = selectOptions[value] || [];
		query();
	};
	const selectList = ref([]);
	const selectionChange = (rows) => {
		selectList.value = rows;
	};
	const handleDelList = () => {
		if (selectList.value.length > 0) {
			proxy.$modal
				.confirm("是否确认删除 ？")
				.then(function() {
					return APIS.batchDelete(selectList.value.map((item) => item.id));
				})
				.then(() => {
					getList();
				});
		}
	};
</script>

<style lang="scss" scoped></style>